<template>
  <div>
    <el-row>
      <el-col>
        <el-button
                @click="drawer = true"
                type="primary"
                style="margin: 10px;border-right: none;"
                class="el-icon-upload el-icon--right"
        >上传列表</el-button>
        <el-button type="primary" @click="newDirDialog = true">新建文件夹</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <div style="padding-left: 10px">
          <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item v-for="(a,index) in pathFile" :key="index">
              <span @click="navigationClick(index)" style="color:#09AAff">{{a.name}}</span>
            </el-breadcrumb-item>
            <el-breadcrumb-item>
              <span>{{currentPath.name}}</span>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-col>
    </el-row>
    <el-row>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="name" label="文件名">
            <template slot-scope="scope">
              <span v-if="scope.row.status==1">
                <i class="el-icon-folder"></i>
                <span style="margin-left: 10px" @click="openDir(scope.row)">{{ scope.row.name }}</span>
              </span>
              <span v-else>
                <i :class="fileIcon[scope.row.status]"></i>
                <span style="margin-left: 10px">{{ scope.row.name }}</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="size" label="大小" >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{transSize(scope.row.size)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="time" label="日期" >
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ transDate(scope.row.time)}}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-dropdown>
                <span class="el-dropdown-link">
                  ....
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-if="scope.row.status!=1">
                    <a :href="scope.row.uri+'?parameter=1'">下载</a>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <span @click="deleteFile(scope.row)">删除</span>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <span @click="shareFile(scope.row)">分享</span>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <span @click="renameClick(scope.row)">重命名</span>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <span @click="clickCP(scope.row)">复制</span>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <span @click="clickMV(scope.row)">移动</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
    </el-row>
        <el-dialog
          :title="'改为「'+reform.name+'」'"
          :visible.sync="renameDialog"
          width="30%"
          :modal-append-to-body="false"
        >
          <el-form ref="form" :model="reform">
            <el-form-item>
              <el-form-item label="文件名称">
                <el-input v-model="reform.name"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="txt" @click="onSubmitRename">立即修改</el-button>
              </el-form-item>
            </el-form-item>
          </el-form>
        </el-dialog>
    <!--上传组件-->
    <el-drawer title :visible.sync="drawer" :with-header="false" direction="rtl">
      <solt>
        <el-upload
                class="upload-demo"
                action="http://localhost:8014/api_file/file/upload"
                :data="updateData()"
                :headers="updateHead()"
                :file-list="fileList"
                :on-success="success"
        >
          <el-button type="primary">点击上传</el-button>
        </el-upload>
      </solt>
    </el-drawer>
    <!--文件创建-->
    <el-dialog
            :title="'在《'+currentPath.name+'》下新建文件夹'"
            :visible.sync="newDirDialog"
            width="50%"
            modal-append-to-body = false
    >
      <el-form ref="form" :model="form">
        <el-form-item>
          <el-form-item label="文件夹名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="txt" @click="onSubmitNewDir">立即创建</el-button>
          </el-form-item>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :title="'移动到'" :visible.sync="mvDialog" modal-append-to-body="false">
      <Select :pId.sync="pId" :id="file.id"></Select>
      <el-button type="txt" @click="onSubmitMV()">确认保存</el-button>
    </el-dialog>
    <el-dialog :title="'复制到'" :visible.sync="cpDialog" modal-append-to-body="false">
      <Select :pId.sync="pId"></Select>
      <el-button type="txt" @click="onSubmitCP()">确认保存</el-button>
    </el-dialog>
  </div>
</template>

<script>
import Select from "./Select";
export default {
  data() {
    return {
      drawer: false,      //上传列表
      tableData: [],      //数据列表
      pathFile: [],       //导航栏数据
      file:'',
      pId:'',
      form: {             //文件创建表单
        name: "新文件夹"
      },
      reform: {           //重名呢表单
        name: "新文件夹",
        id: {}
      },
      currentPath: { index: 1, name: "根节点" }, //当前节点
      fileIcon: [
        "el-icon-folder",
        "el-icon-folder",
        "el-icon-picture-outline",
        "el-icon-video-play",
        "el-icon-document",
        "el-icon-headset",
        "el-icon-cloudy"
      ],
      fileList: [],               //上传列表
      newDirDialog: false,        //文件创出表单显示
      renameDialog: false,
      mvDialog: false,
      cpDialog: false
    };
  },
  methods: {
    //打开目录
    openDir(file) {
        this.pathFile.push({'name':this.currentPath.name,'index':this.currentPath.index})
        this.currentPath.index = file.id;
        this.currentPath.name = file.name;
        this.selectFile(this.currentPath.index);
    },
    //导航栏点击
    navigationClick(index) {
      //设置当前文件目录位置
      this.currentPath = this.pathFile[index];
      //移除后面的节点
      for (let i = this.pathFile.length - 1; i >= index; i--) {
        this.pathFile.pop();
      }
      this.selectFile(this.currentPath.index);
    },
    //时间转换
    transDate(n) {
      let date = new Date(n);
      let Y = date.getFullYear() + "-";
      let M =
              (date.getMonth() + 1 < 10
                      ? "0" + (date.getMonth() + 1)
                      : date.getMonth() + 1) + "-";
      let D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      return Y + M + D;
    },
    //大小转换
    transSize(size){
      if(size == null) return
      if(size<1024){
        return size+'B'
      }else if(size<1048576){
        return (size/1024.0).toFixed(2)+'K'
      }else if(size<1073741824){
        return (size/1048576).toFixed(2)+'M'
      }else{
        return (size/1073741824).toFixed(2)+'G'
      }
    },
    //上传成功
    success(response, file, fileList) {
      if(response.flag){
        this.$message.success(  response.data+ "上传成功");
        this.selectFile(this.currentPath.index);
      }else{
        this.$message.error(file.name + "上传失败");
      }
    },

    //上传头信息
    updateHead() {
      return { jti: this.$qs.parse(window.sessionStorage.getItem("jti")).jti };
    },
    //上传附带参数
    updateData() {
      return { pId: this.currentPath.index };
    },

    //删除文件
    deleteFile(file) {
      this.$http
        .delete("/api_file/file/delete_file?id=" + file.id)
        .then(async res => {
          //这里需要同步
          if (res.data.status == 200) {
            const { data: res } = await this.$http.get(
              "/api_file/file/bypId?pId=" + this.currentPath.index
            );
            this.tableData = res;
            this.$message.success(
              "删除:" + file.name + "成功，七天内可在回收站复原"
            );
          } else {
            return this.$message.error("删除:" + file.name + res.data.message);
          }
        });
    },

    //
    onSubmitNewDir() {
      this.$http
        .post(
          "/api_file/file/new_folder",
          this.$qs.stringify({
            pId: this.currentPath.index,
            name: this.form.name
          })
        )
        .then(async res => {
          if (res.data.status == 200) {
            const { data: res } = await this.$http.get(
              "/api_file/file/bypId?pId=" + this.currentPath.index
            );
            this.tableData = res;
            this.newDirDialog = false;
            this.message("创建「" + this.form.name + "」成功", true);
            this.form.name = "新文件夹";
          } else {
            this.newDirDialog = false;
            this.message("创建「" + this.form.name + "失败", false);
            this.form.name = "新文件夹";
          }
        });
    },
    onSubmitRename() {
      this.$http
        .post(
          "/api_file/file/rename",
          this.$qs.stringify({
            id: this.reform.id,
            name: this.reform.name
          })
        )
        .then(async res => {
          if (res.data.status == 200) {
            const { data: res } = await this.$http.get(
              "/api_file/file/bypId?pId=" + this.currentPath.index
            );
            this.tableData = res;
            this.renameDialog = false;
            this.message("重命名为「" + this.reform.name + "」成功", true);
            this.form.name = "新文件夹";
          } else {
            this.renameDialog = false;
            this.message("重命名为「" + this.reform.name + "失败", false);
            this.form.name = "新文件夹";
          }
        });
    },
    message(message, flag) {
      if (flag) {
        this.$message.success(message);
      } else {
        this.$message.error(message);
      }
    },
    renameClick(file) {
      this.reform.name = file.name;
      this.reform.id = file.id;
      this.renameDialog = true;
    },
    shareFile(file) {
      this.$http
        .get("/api_file/file/share?id=" + file.id+"&day=3")
        .then(async res => {
          let key = res.data.data
          if (res.data.status == 200) {
            const { data: res } = await this.$http.get(
              "/api_file/file/bypId?pId=" + this.currentPath.index
            );
            this.tableData = res;
            this.$message.success(
              "分享码:http://123.56.110.166:8080/#/sharefile?key=" +key
            );
          } else {
            return this.$message.error("删除:" + file.name + res.data.message);
          }
        });
    },
    //按文件的fid查询文件
    selectFile(fid){
      this.$http.get(
              "/api_file/file/bypId?pId=" + fid
      ).then(res=>{
        this.tableData = res.data;
      }).catch(error=>{
        this.$message.error("查询失败");
      });
    },
    onSubmitMV(){
      this.$http.get("/api_file/file/mvFile?id="+this.file.id+"&pId="+this.pId).then(res=>{
        if(res.status == 200){
          this.selectFile(this.currentPath.index);
          this.mvDialog = false
          this.message("文件移动成功",true)
        }else{
          this.mvDialog = false
          this.message("文件移动失败",false)
        }
      })
    },
    onSubmitCP(){
      this.$http.get("/api_file/file/cpFile?id="+this.file.id+"&pId="+this.pId).then(res=>{
        if(res.status == 200){
          this.selectFile(this.currentPath.index);
          this.cpDialog = false
          this.message("文件复制成功",true)
        }else{
          this.cpDialog = false
          this.message("文件复制失败",false)
        }
      })
    },
    clickMV(file){
      this.file = file;
      this.mvDialog = true;

    },
    clickCP(file){
      this.file = file;
      this.cpDialog = true;

    }
  },
  created(){
    this.selectFile(this.currentPath.index);
  },
  components: {
    Select
  }
};
</script>

<style lang="less" scoped>
.max_container {
  height: 50%;
  border: 0;
}
.el-breadcrumb {
  font-size: 20px;
  line-height: 2;
  margin-left: 20px;
}
</style>
